From: Florian Müllner <fmuellner@gnome.org>
Date: Fri, 18 Feb 2011 22:00:04 +0000 (+0100)
Subject: appMenu: Clip app icon when the button is active
X-Git-Tag: archive/raspbian/50.5-1+rpi1~1^2~1013^2^2~8930
X-Git-Url: https://dgit.raspbian.org/%22http://www.example.com/cgi/%22/%22http:/www.example.com/cgi/%22?a=commitdiff_plain;h=473dad0c3ea92fcdc981d6fa64eea40d10001254;p=gnome-shell.git

appMenu: Clip app icon when the button is active

We now use a border image on active panel buttons to underline the
button's content. As the property does not affect the content's
allocation, the app icon ends up being drawn on top of the border
image. To prevent this, use a custom property to clip the bottom of
the app icon when the button is active.

https://bugzilla.gnome.org/show_bug.cgi?id=642697
---

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4cb71aa89..08f636f50 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -204,6 +204,12 @@ StTooltip StLabel {
     spacing: 4px;
 }
 
+.panel-button:active #appMenuIcon,
+.panel-button:checked #appMenuIcon,
+.panel-button:focus #appMenuIcon {
+    app-icon-bottom-clip: 2px;
+}
+
 .app-menu-icon {
     width: 24px;
     height: 24px;
diff --git a/js/ui/panel.js b/js/ui/panel.js
index 550ec2e87..2b315993d 100644
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -210,6 +210,8 @@ AppMenuButton.prototype = {
         this._container.connect('allocate', Lang.bind(this, this._contentAllocate));
 
         this._iconBox = new Shell.Slicer({ name: 'appMenuIcon' });
+        this._iconBox.connect('style-changed',
+                              Lang.bind(this, this._onIconBoxStyleChanged));
         this._container.add_actor(this._iconBox);
         this._label = new TextShadower();
         this._container.add_actor(this._label.actor);
@@ -280,6 +282,17 @@ AppMenuButton.prototype = {
                            onCompleteScope: this });
     },
 
+    _onIconBoxStyleChanged: function() {
+        let node = this._iconBox.get_theme_node();
+        let bottomClip = node.get_length('app-icon-bottom-clip');
+        if (bottomClip > 0)
+            this._iconBox.set_clip(0, 0,
+                                   this._iconBox.width,
+                                   this._iconBox.height - bottomClip);
+        else
+            this._iconBox.remove_clip();
+    },
+
     _stopAnimation: function(animate) {
         this._label.actor.remove_clip();
         if (this._updateId) {